<script setup lang="ts">
import { tableConfig } from './config/table-config';
import { searchConfig } from './config/search-config';
import { doGetEquipmentList } from '@/api/procedure/index';
import { generateNameToLevel } from '@/config/constant';
import { Message } from '@/instance';
import type { EquipmentData } from '@/api/modeling/equipment/model/type';

const visibleModal = ref(false);

const equipemntId = ref();
const open = (id?: string) => {
    visibleModal.value = true;
    equipemntId.value = id;
};
const { getMaxHeight, modalSlotRef, handleFullscreen } = useModal();

watch(
    () => modalSlotRef.value?.tableData,
    tableData => {
        if (!equipemntId.value) return;
        if (tableData && Object.keys(tableData).length) {
            // 初始化工序编码列表选择行
            const row = tableData.filter((item: EquipmentData) => item.id === equipemntId.value)[0];
            if (row) modalSlotRef.value?.setCurrentRow(row); // 设置表格选中当前行
        }
    }
);

const emit = defineEmits(['submit', 'close']);

/**
 * @: 提交
 */
const submit = () => {
    const selectRow = modalSlotRef.value?.selectTableRowData;
    visibleModal.value = false;

    emit('submit', selectRow || {});
};

const mapStatus = {
    IDLE: '空闲',
    USING: '使用中',
    SCRAP: '报废',
    IDLE_SCRAP: '维修中'
} as const;

type MapStatus = typeof mapStatus;
type KeyMapStatus = keyof MapStatus;

const router = useRouter();
const toLink = () => {
    visibleModal.value = false;
    router.push('/equipment');
    emit('close');
};

/**
 * 设置设备表格行样式名
 */
const getRowClassName = ({ row }: SlotData<EquipmentData>) => {
    return row.equipmentStatus === 'SCRAP' ? 'row-disabled' : '';
};

/**
 * 判断当前设备是否为报废状态
 */
const isScrap = (status: KeyMapStatus) => {
    return status === 'SCRAP';
};

/**
 * 点击当前设备列表行
 */
const handleRowClick = (row: EquipmentData) => {
    if (isScrap(row.equipmentStatus)) {
        Message.error('当前设备为报废状态，请重新选择！');
        modalSlotRef.value?.setCurrentRow();
        return;
    }
};

defineExpose({
    open
});
</script>

<template>
    <q-modal
        v-model:visible="visibleModal"
        title="选择设备"
        :centered="true"
        :fullscreen="true"
        width="960px"
        @fullscreen="handleFullscreen"
        @ok="submit"
    >
        <base-search :table-ref="modalSlotRef" :search-config="searchConfig">
            <q-push-button :is-text="false" @click="toLink" />
        </base-search>
        <base-table
            :id="generateNameToLevel('1')"
            ref="modalSlotRef"
            :modal-mode="true"
            :max-height="getMaxHeight"
            :get-data-fn="doGetEquipmentList"
            :table-config="tableConfig"
            :show-setting="false"
            :un-action="true"
            :table-attr="{ rowClassName: getRowClassName }"
            @row-click="handleRowClick"
        >
            <template #equipmentStatus="{ row }: SlotData<EquipmentData>">
                {{ mapStatus[row.equipmentStatus] }}
            </template>
        </base-table>
    </q-modal>
</template>

<style scoped lang="scss">
:deep() {
    .row-disabled {
        cursor: not-allowed;
    }
}
</style>
